<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <!-- 样式 -->
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <div class="wrap">
    <div class="play_wrap" id="player">
      <div class="search_bar">
        <img src="images/player_title.png" alt="" />
        <!-- 搜索歌曲 -->
        <input type="text" v-model='query' @keyup.enter='searchSongs' autocomplete="off" />
      </div>
      <div class="center_con">
        <!-- 搜索歌曲列表 -->
        <!-- 通过mvId来判断列表后面有没有nv播放按钮 -->
        <div class='song_wrapper' ref='song_wrapper'>
          <ul class="song_list">
            <li v-for="item in musicList">
              <a href="javascript:;" @click="playMusic(item.id)"></a>
              <b>{{ item.name }}</b>
              <span v-if='item.mvid !== 0' @click='showMask(item.mvid)'><i></i></span>
            </li>
          </ul>
          <img src="images/line.png" class="switch_btn" alt="">
        </div>
        <!-- 歌曲信息容器 -->
        <div :class="{ player_con: true, playing: isPlay }">
          <img src="images/player_bar.png" class="play_bar" />
          <!-- 黑胶碟片 -->
          <img src="images/disc.png" class="disc autoRotate" />
          <img class="cover autoRotate" :src='musicPic' />
        </div>
        <!-- 评论容器 -->
        <div class="comment_wrapper" ref='comment_wrapper'>
          <h5 class='title'>热门留言</h5>
          <div class='comment_list'>
            <dl v-for='item in commentsList'>
              <dt>
                <img alt="" :src='item.user.avatarUrl' />
              </dt>
              <dd class="name">{{ item.nickname }}</dd>
              <dd class="detail">{{ item.content }}
              </dd>
            </dl>
          </div>
          <img src="images/line.png" class="right_line">
        </div>
      </div>
      <div class="audio_con">
        <audio ref='audio' @play='play' @pause='pause' :src='musicUrl' controls autoplay loop class="myaudio"></audio>
      </div>
      <div class="video_con" :style="isShow ? '' : 'display: none;'">
        <video ref='video' :src='mvUrl' controls="controls"></video>
        <div class="mask" @click='hideMask'></div>
      </div>
    </div>
  </div>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 官网提供的 axios 在线地址 -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script type="text/javascript">
    // 设置axios的基准地址
    axios.defaults.baseURL = 'https://autumnfish.cn';
    // axios.defaults.baseURL = 'http://localhost:3000';

    /*
      1:歌曲搜索接口
        请求地址:https://autumnfish.cn/search
        请求方法:get
        请求参数:keywords(查询关键字)
        响应内容:歌曲搜索结果

      2:歌曲url获取接口
        请求地址:https://autumnfish.cn/song/url
        请求方法:get
        请求参数:id(歌曲id)
        响应内容:歌曲url地址
      3.歌曲详情获取
        请求地址:https://autumnfish.cn/song/detail
        请求方法:get
        请求参数:ids(歌曲id)
        响应内容:歌曲详情(包括封面信息)
      4.热门评论获取
        请求地址:https://autumnfish.cn/comment/hot?type=0
        请求方法:get
        请求参数:id(歌曲id,地址中的type固定为0)
        响应内容:歌曲的热门评论
      5.mv地址获取
        请求地址:https://autumnfish.cn/mv/url
        请求方法:get
        请求参数:id(mvid,为0表示没有mv)
        响应内容:mv的地址
    */

    // 实例化vue
    var app = new Vue({
      el: "#player",
      data: {
        // 输入查询歌曲的内容
        query: '',
        // 歌曲列表
        musicList: [],
        // 歌曲地址
        musicUrl: '',
        // 专辑图片地址
        musicPic: '',
        // 保存评论的数据
        commentsList: [],
        // 遮罩层是否显示，默认不显示
        isShow: false,
        // 存储MV的地址
        mvUrl: '',
        // 专辑图片旋转起来， 判断当前是否是播放的状态
        isPlay: false
      },
      // 方法
      methods: {
        // 监听按下回车按键后查询歌曲的事件
        searchSongs() {
          if (this.query.trim().length <= 0) {
            return
          }
          axios.get('/search', {
            params: {
              keywords: this.query.trim()
            }
          }).then(response => {
            console.log(response.data)
            this.musicList = response.data.result.songs
          }, function (err) {})
        },
        // 播放歌曲
        playMusic(id) {
          // 获取歌曲地址
          axios.get('song/url', {
            params: {
              id
            }
          }).then(response => {
            // console.log(response)
            // console.log(this)
            this.musicUrl = response.data.data[0].url
          }, err => {})
          // 获取专辑图片地址
          axios.get('/song/detail', {
            params: {
              ids: id
            }
          }).then(response => {
            // console.log(response.data.songs[0])
            this.musicPic = response.data.songs[0].al.picUrl
          }, err => {})

          // 获取评论数据
          axios.get('https://autumnfish.cn/comment/hot?type=0', {
            params: {
              id
            }
          }).then(response => {
            console.log(response.data.hotComments)
            this.commentsList = response.data.hotComments
          }, err => {})
        },
        // 显示遮罩层
        showMask(id) {
          // 显示遮罩层
          this.isShow = true
          // 获取NV的地址
          axios.get('https://autumnfish.cn/mv/url?id=' + id)
            .then(response => {
              // console.log(response.data.data.url)
              this.mvUrl = response.data.data.url
            }, err => {})
        },
        // 点击遮罩层，让遮罩层隐藏
        hideMask() {
          this.isShow = false
        },
        // 播放
        play() {
          this.isPlay = true
        },
        // 暂停/停止状态
        pause() {
          this.isPlay = false
        }
      }
    })
  </script>
</body>

</html>